<template>
  <div class="w-full" v-loading="loading">
    <el-table :data="list">
      <el-table-column label="节点名称" prop="nodeName"></el-table-column>
      <el-table-column label="节点类型">
        <template #default="{ row }">{{
          row.nodeType === 1 ? "章鱼" : "其他"
        }}</template>
      </el-table-column>
      <el-table-column label="登录Code" show-overflow-tooltip>
        <template #default="{ row }">
          <span
            class="cursor-pointer text-main"
            @click="copyToClipBoard(row.nodeLoginCode)"
            >{{ row.nodeLoginCode }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="节点Url"
        prop="nodeUrl"
        min-width="100"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="节点联系人"
        width="110"
        prop="nodeLinkUser"
      ></el-table-column>
      <el-table-column
        label="节点联系方式"
        prop="nodeLinkMobile"
      ></el-table-column>
      <el-table-column
        label="创建人"
        width="80"
        prop="createBy"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        width="170"
        prop="createTime"
      ></el-table-column>
      <el-table-column label="状态" width="100" prop="status">
        <template #default="{ row }">{{
          REVIEW_STATUS_ENUM[row.status]
        }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="list.length"
      class="w-full justify-end mt-12px"
      :total="total"
      layout="total, sizes, prev, pager, next"
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageSize"
      :page-sizes="[10, 30, 60, 120]"
    ></el-pagination>
  </div>
</template>

<script setup>
import { REVIEW_STATUS_ENUM } from "@/const";
import { useLoading, usePage } from "@/hooks";
import { copyToClipBoard } from "@/utils/dom";

const { loading, setLoading } = useLoading();
const { page, total } = usePage(10);
const $api = inject("$api");

const list = ref([]);
const getList = async () => {
  setLoading(true);
  try {
    const { data, total: resTotal } = await $api.company.getNodeList({
      ...page.value,
    });
    list.value = data;
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

watch(
  () => page.value,
  () => {
    getList();
  },
  {
    deep: true,
  }
);

onMounted(() => {
  getList();
});
</script>
